﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mootools.aspx.cs" Inherits="ASPNETVN.PORTAL.Modules.MENU.Pages.Mootools" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script language="javascript" type="text/javascript" src="../Scripts/mootools.js"></script>

    <link href="../StyleSheets/MooToolMenu.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body style="margin: 0;">
    <form id="form1" runat="server">
    <div id="LeftPane" runat="server">
    </div>

    <script language="javascript" type="text/javascript">
        window.onload = function() {
            $$('#menu a').each(function(el) {
                el.addEvent('mouseenter', function() {
                    p = el.innerHTML.toUpperCase();
                    el.innerHTML = p;
                    el.setStyle('background', 'url(../images/MootoolMenu/bg.jpg)');
                    myEffect = el.effect('margin-left', { duration: 100, transition: Fx.Transitions.linear, wait: true }).start('10', '30');
                })

                el.addEvent('mouseleave', function() {
                    p = el.innerHTML.toLowerCase();
                    el.innerHTML = p;
                    el.setStyle('background', 'url(../images/MootoolMenu/bg.jpg)');
                    myEffect = el.effect('margin-left', { duration: 800, transition: Fx.Transitions.Bounce.easeOut, wait: true }).start('30', '0');
                })

            })

            myStretch = document.getElementsByClassName('toggler');
            myStretcher = document.getElementsByClassName('accordion');

            // setup the accordion elements by clearing display styles	
            myStretcher.each(function(el) {
                el.style.display = '';
            });


            var ac = new Fx.Accordion(myStretch, myStretcher,

              {
                  onActive: function(tog) {
                      tog.setStyle('color', '#ACDA4E');
                      tog.setStyle('background-color', '#1d1d1d');
                      tog.setStyle('cursor', 'help');

                  },
                  onBackground: function(tog) {

                      tog.setStyle('color', '#FFF');
                      tog.setStyle('background-color', '#2d2d2d');
                      tog.setStyle('cursor', 'help');

                  },
                  alwaysHide: true,
                  start: 'all-closed',

                  height: true,
                  opacity: true
              });
        }

        st = document.getElementsByClassName('toggler2');
        stc = document.getElementsByClassName('accordion2');

        // setup the accordion elements by clearing display styles	
        stc.each(function(el) {
            el.style.display = '';
        });

        var acc = new Fx.Accordion(st, stc,

              {
                  onActive: function(tog) {
                      tog.setStyle('color', '#ACDA4E');
                      tog.setStyle('background-color', '#1d1d1d');
                      tog.setStyle('cursor', 'help');

                  },
                  onBackground: function(tog) {

                      tog.setStyle('color', '#FFF');
                      tog.setStyle('background-color', '#2d2d2d');
                      tog.setStyle('cursor', 'help');

                  },
                  alwaysHide: true,
                  start: 'all-closed',
                  opacity: true
              });


    </script>

    </form>
</body>
</html>
